<template>
	<view class="purchaseOrder">
		<uni-nav-bar
			color="#ffffff"
			background-color="#00aded"
			:statusBar="true"
			title="运输单价"
			fixed="true"
			left-icon="left"
			left-text="返回"
			@clickLeft="back"
			right-icon="plusempty"
			@clickRight="addTransPriceClick"
		></uni-nav-bar>
		<view class="purchaseOrder_top">
			<!-- 搜索 -->
			<!-- 搜索 -->
			<dil-search :columnData="options.columnDataList" @onSearch="onSearch" v-if="options.columnDataList.length > 0"></dil-search>
		</view>
		<view class="purchaseOrder_main">
			<dil-card class="dilCard" @emitEvent="emitEvent" v-bind.sync="options"></dil-card>
		</view>
		<view class="purchaseOrder_floot"></view>
		<view class="popup">
			<uni-popup ref="addPopup" type="dialog">
				<view class="popContent">
					<view class="main">
						<dil-grad-form
							:stepOptions="stepOptions"
							:stepActive="stepActive"
							:formList="formList"
							:formValue="form"
							@next="next"
							@previous="previous"
							@cancelForm="canceAdd"
							@submitGradForm="confirmAdd"
						></dil-grad-form>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="updPopup" type="dialog">
				<view class="popContent">
					<view class="main">
						<dil-grad-form
							:stepOptions="stepOptions"
							:stepActive="stepActive"
							:formList="formList"
							:formValue="form"
							@next="next"
							@previous="previous"
							@cancelForm="canceUpd"
							@submitGradForm="confirmUpd"
						></dil-grad-form>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			stepOptions: [{ title: '主体信息1' }, { title: '主体信息2' }, { title: '主体信息3' }],
			stepActive: 0,
			formList: [
				{
					formId: 722,
					form: {}
				},
				{
					formId: 723,
					form: {}
				},
				{
					formId: 724,
					form: {}
				}
			],
			form: {},
			options: {
				requestUrl: '/api/v1/ams/getAmsTransPriceList?apiId=532',
				requestQuery: {},
				cardSlotList: [
					{
						label: '修改',
						icon: 'compose',
						emitEvent: 'updTransPriceClick'
					},
					{
						label: '删除',
						icon: 'trash-filled',
						emitEvent: 'delTransPriceClick'
					}
				],
				columnDataList: [],
				totalNum: 0
			}
		};
	},
	computed: {
		...mapState('purchase', ['text', 'puchaseOrderItem'])
	},
	onShow() {
		uni.$emit('onShow', 1);
	},
	created() {
		this.initialMap = { deleted: -1 };
		this.options.requestQuery = this.initialMap;
	},
	mounted() {},
	methods: {
		back() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		onSearch(item = {}) {
			this.options.requestQuery = { ...JSON.parse(JSON.stringify(item)), ...this.initialMap };
		},

		emitEvent(eventName, cardItem) {
			console.log('cardItem: ', cardItem);
			this[eventName](cardItem);
		},
		//步骤，上一步
		previous(index, form) {
			console.log('previousform: ', form);
			this.form = form;
			this.stepActive = index;
		},
		next(index, form) {
			console.log('nextform: ', form);
			this.form = form;
			this.stepActive = index;
		},
		detailBrowse(item) {
			console.log(item);
			console.log('详情');
		},
		addTransPriceClick(item) {
			this.stepActive = 0;
			this.form = {};
			this.$refs.addPopup.open();
		},
		confirmAdd() {
			this.addTransPrice();
		},
		canceAdd() {
			this.form = {};
			this.onSearch();
			this.$refs.addPopup.close();
		},
		updTransPriceClick(item) {
			this.stepActive = 0;
			this.form = item;
			this.$refs.updPopup.open();
		},
		confirmUpd() {
			this.updTransPrice();
		},
		canceUpd() {
			this.form = {};
			this.onSearch();
			this.$refs.updPopup.close();
		},
		delTransPriceClick(cardItem) {
			let that = this;
			uni.showModal({
				cancelText: '取消',
				confirmText: '确认',
				title: '操作不可撤销，确定要继续？',
				success: (res) => {
					if (res.confirm) {
						this.delTransPrice(cardItem);
					} else if (res.cancel) {
						uni.showToast({
							title: '用户取消操作！',
							icon: 'none',
							duration: 3000
						});
					}
				}
			});
		},
		async addTransPrice() {
			const res = await this.$myRequest({
				url: '/api/v1/ams/',
				data: this.form
			}).catch((res) => {
				uni.showToast({
					duration: 2000,
					title: res.data.message,
					icon: 'success'
				});
			});
			if (res.data.status == 'succeed') {
				uni.showToast({
					duration: 2000,
					title: '新增成功',
					icon: 'success'
				});
				this.$refs.addPopup.close();
			} else {
				uni.showToast({
					duration: 2000,
					title: res.data.message,
					icon: 'success'
				});
			}
			this.onSearch();
		},
		async updTransPrice() {
			const res = await this.$myRequest({
				url: '/api/v1/ams/' + this.form.priceId,
				data: this.form,
				method: 'PUT'
			}).catch((res) => {
				uni.showToast({
					duration: 2000,
					title: res.data.message,
					icon: 'success'
				});
			});
			if (res.data.status == 'succeed') {
				uni.showToast({
					duration: 2000,
					title: '修改成功',
					icon: 'success'
				});
				this.$refs.updPopup.close();
			} else {
				uni.showToast({
					duration: 2000,
					title: res.data.message,
					icon: 'success'
				});
			}
			this.onSearch();
		},
		async delTransPrice(data) {
			let form = {
				priceId: data.priceId
			};
			const res = await this.$myRequest({
				url: '/api/v1/ams/logicdelete',
				data: form,
				method: 'Put'
			}).catch((res) => {
				uni.showToast({
					duration: 2000,
					title: res.data.message,
					icon: 'success'
				});
			});
			if (res.data.status == 'succeed') {
				uni.showToast({
					duration: 2000,
					title: '删除成功',
					icon: 'success'
				});
			} else {
				uni.showToast({
					duration: 2000,
					title: res.data.message,
					icon: 'success'
				});
			}
			this.onSearch();
		},
		//以下是vuex;
		...mapMutations('purchase', ['updatePurchaseOrderItem'])
	}
};
</script>

<style lang="scss" scoped>
.purchaseOrder {
	width: 100vw;
	height: 100%;
	background-color: #f5f5f5;
	&_top {
		background-color: #fff;
	}
	&_main {
	}
	&_floot {
		background-color: #fff;
	}
}
</style>
